<script setup lang="ts">
import type { GoodsInfo } from '@/types/data.d'

defineProps<{
    goods: GoodsInfo
}>()
</script>
<template>
    <div class="goods-tabs" v-if="goods.details">
        <nav>
            <a>商品详情</a>
        </nav>
        <div class="goods-detail" v-if="goods && goods.details">
            <!-- 属性 -->
            <ul class="attrs">
                <li v-for="item in goods.details.properties" :key="item.value">
                    <span class="dt">{{ item.name }}</span>
                    <span class="dd">{{ item.value }}</span>
                </li>
            </ul>
            <!-- 图片 -->
            <img v-for="item in goods.details.pictures" :key="item" v-lazy="item" alt="" />
        </div>
    </div>
</template>

<style scoped lang="less">
.goods-tabs {
    min-height: 600px;
    background: #fff;

    nav {
        height: 70px;
        line-height: 70px;
        display: flex;
        border-bottom: 1px solid #f5f5f5;

        a {
            padding: 0 40px;
            font-size: 18px;
            position: relative;

            >span {
                color: @priceColor;
                font-size: 16px;
                margin-left: 10px;
            }
        }
    }
}

.goods-detail {
    padding: 40px;

    .attrs {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px;

        li {
            display: flex;
            margin-bottom: 10px;
            width: 50%;

            .dt {
                width: 100px;
                color: #999;
            }

            .dd {
                flex: 1;
                color: #666;
            }
        }
    }

    >img {
        width: 100%;
    }
}
</style>